<!DOCTYPE html>
<html lang="{{ current_locale }}">
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        {% for al in alternate_locales %}<link rel="alternate" hreflang="{{ al.lang }}" href="{{ al.link }}" />
        {% endfor %}
        <title>Translate</title>

        <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">

        <link rel="preload" href="{{ url_for('static', filename='icon.svg') }}" as="image" />
        <link rel="preload" href="{{ url_for('static', filename='js/vue@2.js') }}" as="script">
        <link rel="preload" href="{{ url_for('static', filename='js/materialize.min.js') }}" as="script">
        <link rel="preload" href="{{ url_for('static', filename='js/prism.min.js') }}" as="script">
        <link rel="preload" href="js/app.js?v={{ version }}" as="script">

        <link rel="preload" href="{{ url_for('static', filename='css/materialize.min.css') }}" as="style"/>
        <link rel="preload" href="{{ url_for('static', filename='css/material-icons.css') }}" as="style"/>
        <link rel="preload" href="{{ url_for('static', filename='css/prism.min.css') }}" as="style"/>
        <link rel="preload" href="{{ url_for('static', filename='css/main.css') }}?v={{ version }}" as="style"/>

        <script src="{{ url_for('static', filename='js/vue@2.js') }}"></script>


        <!-- Compiled and minified CSS -->
        <link rel="stylesheet" href="{{ url_for('static', filename='css/materialize.min.css') }}">
        <link rel="stylesheet" href="{{ url_for('static', filename='css/material-icons.css') }}" />
        <link rel="stylesheet" href="{{ url_for('static', filename='css/prism.min.css') }}" />
        <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}?v={{ version }}" />

        <meta name="color-scheme" content="light">
</head>

<body>
        <header>
                <div class="container">
                        <div class="banner-row">
                                <h1 class="banner-title"><a href="{{ url_for('Main app.index') }}" class="noline">Translate</a></h1>
                                <span id="timestamp"><span id="now-date"></span></span>
                        </div>
                </div>
                <nav role="navigation">
                        <div class="nav-wrapper container">
                                <button data-target="nav-mobile" class="sidenav-trigger"><i class="material-icons">menu</i></button>
                                <ul id="nav" class="right hide-on-med-and-down top-nav position-relative">
                                        {% set menulinks %}
                                        {% if not hide_api %}
                                        <li><a href="{% if web_version %}https://docs.libretranslate.com{% else %}{{ swagger_url }}{% endif %}">{{ _h("API Docs") }}</a></li>
                                        {% endif %}
                                        {% if get_api_key_link %}
                                        <li><a href="{{ get_api_key_link }}">{{ _h("Get API Key") }}</a></li>
                                        {% endif %}
                                        <li><a href="https://github.com/LibreTranslate/LibreTranslate" target="_blank" rel="noopener noreferrer">{{ _h("GitHub") }}</a></li>
                                        {% if api_keys %}
                                        <li><a class="noline" href="javascript:setApiKey()" title="{{ _h('Set API Key') }}" aria-label="{{ _h('Set API Key') }}"><i class="material-icons">vpn_key</i></a></li>
                                        {% endif %}
                                        <li class="change-language"><a class="noline" href="javascript:void(0)" title="{{ _h('Change language') }}"><i class="material-icons">language</i></a>
                                        </li>
                                        <li class="locale-panel">
                                                <select id="locales" onchange="changeLocale(this)">
                                                        {% for l in available_locales %}<option value="{{ l['code'] }}" {{ 'selected' if current_locale == l['code'] else ''}}>{{ l['name'].capitalize() }}</option>{% endfor %}
                                                </select>
                                                <a href="https://hosted.weblate.org/projects/libretranslate/app/{{ current_locale }}/">{{ _h("Edit") }}<i class="material-icons">create</i></a>
                                        </li>
                                        {% endset %}
                                        {{ menulinks }}
                                </ul>
                                <ul id="nav-mobile" class="sidenav">
                                        {{ menulinks }}
                                </ul>
                                <script>
                                        var localeLinks = {
                                                {% for al in alternate_locales %}"{{ al.lang }}": "{{ al.link }}"{% if not loop.last %},{% endif %}
                                                {% endfor %}
                                        };

                                        function changeLocale(slt){
                                                var lang = slt.value;
                                                if (localeLinks[lang]) location.href = localeLinks[lang];
                                                else location.href = '?lang=' + slt.value;
                                        }

                                        var btnChangeLangs = document.getElementsByClassName("change-language");
                                        var localePanels = document.getElementsByClassName("locale-panel");

                                        for (var i = 0; i < btnChangeLangs.length; i++){
                                                (function(btn){
                                                        btn.addEventListener('click', function(e){
                                                                e.stopPropagation();
                                                                btn.classList.toggle('clicked');
                                                        });
                                                })(btnChangeLangs[i]);
                                        }
                                        for (var i = 0; i < localePanels.length; i++){
                                                localePanels[i].addEventListener('click', function(e){
                                                        e.stopPropagation();
                                                });
                                        }
                                        document.addEventListener('click', function(){
                                                for (var i = 0; i < btnChangeLangs.length; i++){
                                                        btnChangeLangs[i].classList.remove('clicked');
                                                }
                                        });
                                </script>
                        </div>
                </nav>
        </header>

        <main id="app">
        <div class="section no-pad-bot center" v-if="loading">
                <div class="container">
                        <div class="row">
                                <div class="preloader-wrapper active">
                                <div class="spinner-layer spinner-blue-only">
                                        <div class="circle-clipper left">
                                        <div class="circle"></div>
                                        </div><div class="gap-patch">
                                        <div class="circle"></div>
                                        </div><div class="circle-clipper right">
                                        <div class="circle"></div>
                                        </div>
                                </div>
                                </div>
                        </div>
                </div>
        </div>

        <div v-else-if="error" class="component">
                <div class="section no-pad-bot">
                        <div class="container">
                                <div class="row">
                                        <div class="col s12 m12">
                                                <div class="card horizontal">
                                                        <div class="card-stacked">
                                                        <div class="card-content">
                                                                <i class="material-icons">warning</i><p> [[ error ]]</p>
                                                        </div>
                                                        <div class="card-action">
                                                                <a href="#" @click="dismissError">{{ _h("Dismiss") }}</a>
                                                        </div>
                                                        </div>
                                                </div>
                                        </div>
                                </div>
                        </div>
                </div>
        </div>

        <div v-else class="component">
                <div class="section no-pad-bot">
                        <div class="container">
                                <div class="row">
                                        {% if under_attack %}
                                        <div class="card horizontal" style="z-index: -1;">
                                                <div class="card-stacked">
                                                        <div class="card-content center">
                                                                <i class="material-icons" style="position: relative; top: 4px;">warning</i> {{ _h("Due to bot abuse, translation requests are temporarily limited to users with a valid API key. Sorry for the inconvenience!") }}</p>
                                                        </div>
                                                </div>
                                        </div>
                                        {% endif %}
                                        <div id="translation-type-btns" class="s12 center" v-if="filesTranslation === true">
                                                <button type="button" class="btn btn-switch-type" @click="switchType('text')" :class="{'active': translationType === 'text'}" :disabled="disableInput">
                                                        <i aria-hidden="true" class="material-icons">title</i>
                                                        <span class="btn-text">{{ _h("Translate Text") }}</span>
                                                </button>
                                                <button type="button" class="btn btn-switch-type" @click="switchType('files')" :class="{'active': translationType === 'files'}" :disabled="disableInput">
                                                        <i aria-hidden="true" class="material-icons">description</i>
                                                        <span class="btn-text">{{ _h("Translate Files") }}</span>
                                                </button>
                                        </div>
                                        <form id="translation-form" class="col s12">
                                                <div class="row mb-0">
                                                        <div class="col s6 language-select">
                                                                <span id="sourceLangLabel">{{ _h("Translate from") }}</span>
                                                                <span v-if="detectedLangText !== ''">[[ detectedLangText ]]</span>
                                                                <select aria-labelledby="sourceLangLabel" class="browser-default" v-model="sourceLang" ref="sourceLangDropdown" @change="handleInput">
                                                                        <template v-for="option in sourceLangs">
                                                                                <option :value="option.code">[[ option.name ]]</option>
                                                                        </template>
                                                                </select>
                                                        </div>

                                                        <div class="col s6 language-select">
                                                                <a href="javascript:void(0)" @click="swapLangs" class="btn-switch-language" aria-label="{{ _h('Swap source and target languages') }}">
                                                                        <i class="material-icons">swap_horiz</i>
                                                                </a>
                                                                <span id="targetLangLabel">{{ _h("Translate into") }}</span>
                                                                <select aria-labelledby="targetLangLabel" class="browser-default" v-model="targetLang" ref="targetLangDropdown" @change="handleInput">
                                                                        <template v-for="option in targetLangs">
                                                                                <option v-if="option.code !== 'auto'" :value="option.code">[[ option.name ]]</option>
                                                                        </template>
                                                                </select>
                                                        </div>
                                                </div>

                                                <div class="row" v-if="translationType === 'text'">
                                                        <div class="input-field textarea-container col s12 m6">
                                                                <label for="textarea1" class="sr-only">
                                                                        {{ _h("Text to translate") }}
                                                                </label>
                                                                <textarea id="textarea1" :maxLength="charactersLimit" v-model="inputText" @input="handleInput" ref="inputTextarea" dir="auto" :disabled="disableInput"></textarea>
                                                                <button class="btn-delete-text" title="{{ _h('Delete text') }}" aria-label="{{ _h('Delete text') }}" @click="deleteText">
                                                                        <i class="material-icons">close</i>
                                                                </button>
                                                                <div class="characters-limit-container" v-if="charactersLimit !== -1">
                                                                        <label>[[ inputText.length ]] / [[ charactersLimit ]]</label>
                                                                </div>
                                                        </div>
                                                        <div class="input-field textarea-container col s12 m6">
                                                                <label for="textarea2" class="sr-only">
                                                                        {{ _h("Translated text") }}
                                                                </label>
                                                                <textarea id="textarea2" v-model="translatedText" ref="translatedTextarea" dir="auto" v-bind:readonly="suggestions && !isSuggesting" :disabled="disableInput"></textarea>
                                                                        <div class="actions">
                                                                                <button v-if="suggestions && !loadingTranslation && inputText.length && !isSuggesting" class="btn-action" @click="suggestTranslation" aria-label="{{ _h('Suggest translation') }}">
                                                                                        <i class="material-icons">edit</i>
                                                                                </button>
                                                                                <button v-if="suggestions && !loadingTranslation && inputText.length && isSuggesting" class="btn-action btn-blue" @click="closeSuggestTranslation">
                                                                                        <span>{{ _h("Cancel") }}</span>
                                                                                </button>
                                                                                <button v-if="suggestions && !loadingTranslation && inputText.length && isSuggesting" :disabled="!canSendSuggestion" class="btn-action btn-blue" @click="sendSuggestion">
                                                                                        <span>{{ _h("Send") }}</span>
                                                                                </button>
                                                                                <button v-if="!isSuggesting" class="btn-action btn-copy-translated" @click="copyText">
                                                                                        <span>[[ copyTextLabel ]]</span> <i class="material-icons" aria-hidden="true">content_copy</i>
                                                                                </button>
                                                                        </div>
                                                                <div class="position-relative">
                                                                        <div class="progress translate" v-if="loadingTranslation">
                                                                                <div class="indeterminate"></div>
                                                                        </div>
                                                                </div>
                                                        </div>
                                                </div>
                                                <div class="row" v-if="translationType === 'files'">
                                                        <div class="file-dropzone">
                                                                <div v-if="inputFile === false" class="dropzone-content">
                                                                        <span>{{ _h("Supported file formats:") }} [[ supportedFilesFormatFormatted ]]</span>
                                                                        <form action="#">
                                                                                <div class="file-field input-field">
                                                                                        <div class="btn">
                                                                                                <span id="fileLabel">{{ _h("File") }}</span>
                                                                                                <input aria-labelledby="fileLabel" type="file" :accept="supportedFilesFormatFormatted" @change="handleInputFile" ref="fileInputRef">
                                                                                        </div>
                                                                                        <div class="file-path-wrapper hidden">
                                                                                                <input class="file-path validate" type="text">
                                                                                        </div>
                                                                                </div>
                                                                        </form>
                                                                </div>
                                                                <div v-if="inputFile !== false" class="dropzone-content">
                                                                        <div class="card">
                                                                                <div class="card-content">
                                                                                        <div class="row mb-0">
                                                                                                <div class="col s12">
                                                                                                        [[ inputFile.name ]]
                                                                                                        <button v-if="loadingFileTranslation !== true" @click="removeFile" class="btn-flat" aria-label="{{ _h('Remove file') }}">
                                                                                                             <i class="material-icons">close</i>
                                                                                                        </button>
                                                                                                </div>
                                                                                        </div>
                                                                                </div>
                                                                        </div>
                                                                        <button @click="translateFile" v-if="translatedFileUrl === false && loadingFileTranslation === false" class="btn">{{ _h("Translate") }}</button>
                                                                        <a v-if="translatedFileUrl !== false" :href="translatedFileUrl" class="btn">{{ _h("Download") }}</a>
                                                                        <div class="progress" v-if="loadingFileTranslation">
                                                                                <div class="indeterminate"></div>
                                                                        </div>
                                                                </div>
                                                        </div>
                                                </div>
                                        </form>
                                </div>
                        </div>
                </div>

                {% if not hide_api %}
                <div class="section no-pad-bot" v-if="translationType !== 'files'">
                        <div class="container">
                                <div class="row center">
                                        <div class="col s12 m12">

                                        <div class="row center code-row-wrapper">
                                                <div class="col s12 m12 l6 left-align code-box">
                                                        <p class="mb-0">{{ _h("Request") }}</p>
                                                        <pre class="code mt-0"><code class="language-javascript" v-html="$options.filters.highlight(requestCode)">
                                                        </code></pre>
                                                </div>
                                                <div class="col s12 m12 l6 left-align code-box">
                                                        <p class="mb-0">{{ _h("Response") }}</p>
                                                        <pre class="code mt-0"><code class="language-javascript" v-html="$options.filters.highlight(output)">
                                                        </code></pre>
                                                </div>
                                        </div>

                                        </div>
                                </div>
                        </div>
                </div>
                {% endif %}
        </div>
        </main>

        <footer class="page-footer">
                <div class="container">
                        <div class="row">
                                <div class="col l12 s12">
                                        <h5 class="white-text">{{ _h("LibreTranslate") }} <span style="font-size: 16px">v{{ version }}</span></h5>
                                        <p class="grey-text text-lighten-4">{{ _h("Free and Open Source Machine Translation API") }}</p>
                                        <p>{{ _h("License:") }} <a class="grey-text text-lighten-4" href="https://www.gnu.org/licenses/agpl-3.0.en.html" rel="noopener noreferrer">AGPLv3</a></p>
                                </div>
                        </div>
                </div>
                <div class="footer-copyright center">
                        <p class="white-text">
                                {{ _h("Made with %(heart)s by %(contributors)s and powered by %(engine)s", heart='❤', contributors='<a class="white-text" href="https://github.com/LibreTranslate/LibreTranslate/graphs/contributors" rel="noopener noreferrer">%s</a>' % _h("%(libretranslate)s Contributors", libretranslate="LibreTranslate"), engine='<a class="white-text text-lighten-3" href="https://github.com/argosopentech/argos-translate/" rel="noopener noreferrer">Argos Translate</a>') }}
                        </p>
                </div>
        </footer>

        <script src="{{ url_for('static', filename='js/materialize.min.js') }}"></script>
        <script>
        // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0
        window.Prism = window.Prism || {};
        window.Prism.manual = true;
        // @license-end
        </script>
        <script src="{{ url_for('static', filename='js/prism.min.js') }}"></script>
        <script src="js/app.js?v={{ version }}"></script>
        <script>
        function updateNowDate() {
                var nowSpan = document.getElementById('now-date');
                if (!nowSpan) return;
                var now = new Date();
                nowSpan.textContent = now.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric', year: 'numeric' }) +
                        ', ' + now.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' });
        }
        updateNowDate();
        setInterval(updateNowDate, 60000);
        </script>
</body>
</html>